Creating functional components in React
First, let’s install the React development tools or extensions for your web browser. You can install the new development tools from the Chrome Web Store.
Click on the ‘Add to Chrome’.
After the installation, you can go to the console area to find out a new tab for React.
The following image shows a new React tab in the Chrome browser.
If you are using Firefox, browse Mozilla-Addons to download and install the React development tools.
Now, after we have done with the installation of dev tools, let’s jump right into the code.
Create React functional component step by step
For some time, imagine there is no component, and we have to write JSX directly into the render method:
import React, { Component } from 'react' import ReactDOM from 'react-dom' ReactDOM.render( <h1>Hello World! </h1> , document.getElementById('root'))
This piece of code will also display Hello World.
So why do we need components when everything is compiled into elements to tide back to index.html?
The answer is: You can’t put everything inside the render()
method. Imagine, having a web page with hundreds of elements on it. This will be just impossible to maintain.
In lesson 1 we mentioned why React is getting popular and why we should use it. One of the reason was its ability to create reusable components using functions – also known as functional components.
Create a new Function in React as shown below
Let’s create a new function called MyApp in index.js.
function MyApp() { //code goes here }
The simple thing about functional component is that you can return the JSX you want to represent through this component.
function MyApp(){ return () }
Write down the following code in index.js
import React, { Component } from 'react' import ReactDOM from 'react-dom' function MyApp() { return ( <ul> <li> Apple </li> <li> Strawberry </li> <li> Banana </li> </ul> ) }
We can create an instance of our functional component by placing the name of the component in an ES6 self-enclosing tag <MyApp/>
ReactDOM.render( <MyApp/> , document.getElementById('root') )
In functional component, you can’t return the two elements next to each other because simply that won’t work.
For example:
function MyApp(){ return ( <h2> The list </h2> <ul> <li>Apple</li> <li>Strawberry</li> <li>Banana</li> </ul> ) }
You can get around with two elements if you wrap everything in a div.
function MyApp(){ return ( <div> <h2> The list </h2> <ul> <li>Apple</li> <li>Strawberry</li> <li>Banana</li> </ul> </div> ) }
MyApp is a functional component rendering a heading and unordered list, but as we create more and more components in an application, we can create components which can render other components.
A practical example of Functional Component in React
Let’s create another functional component for practice for a salad recipe.
This component will display a heading (name of the recipe), an image, list of the ingredients (ordered list) and a paragraph.
import React, { Component } from 'react' import ReactDOM from 'react-dom' import image01 from './tacoslaw.jpg' function MyApp(){ return ( <div> <h2> Taco Slaw </h2> <img src={image01}/> <h4> Ingredients</h4> <ol> <li>1/2 small head cabbage, chopped</li> <li>1 jalapeno pepper, seeded and minced</li> <li>1/2 red onion, minced</li> <li>1 carrot, chopped</li> <li>1 tablespoon chopped fresh cilantro</li> <li>1 lime, juiced</li> </ol> <h4>Directions</h4> <p>In a bowl, mix together the cabbage, jalapeno pepper, red onion, carrot, cilantro, and lime juice. </p> </div> ) } ReactDOM.render( <MyApp/> , document.getElementById('root') )
In this lesson, we learned how to create a functional component, import an image, and use more than one JSX elements in the render method. If you have any question, drop a comment, and I will get back to you.
React Components | Tutorial Home | React components Import & Export |
Comments